<template>
     <el-drawer v-model="showDrawer" :title="title" :size="size" :close-on-click-modal="true" :destroy-on-close="destroyOnClose">
       <div class="formDrawer">
        <div class="body">
            <slot></slot>
        </div>
        <div class="actions">
            <el-button type="primary" @click="submit" :loading="loading" class="mr-2">{{ confirmText }}</el-button>
            <el-button type="default" @click="close">取消</el-button>
        </div>
       </div>
    </el-drawer>
</template>

<script setup>
    import { ref} from 'vue';
    const showDrawer = ref(false);
    const props = defineProps({
        title:String,
        size:{
            type:String,
            default:"50%"
        },
        destroyOnClose:{
            type:Boolean,
            default:false
        },
        confirmText:{
            type:String,
            default:"提交"
        }
    })
    const loading = ref(false);
    const showLoading = () => loading.value = true;
    const hideLoading = () => loading.value = false;
    //打开
    const open = () => showDrawer.value = true;
    //关闭
    const close = () => showDrawer.value = false;
    //提交
    const emit = defineEmits(["submit"]);
    const submit = () => emit("submit");
    //先父组件暴露方法
    defineExpose({
        open,
        close,
        showLoading,
        hideLoading
    })
</script>

<style >
    .formDrawer{
        width: 100%;
        height: 100%;
        position: relative;
        @apply flex flex-col;
    }
    .formDrawer .body{
        flex: 1;
        position: absolute;
        top: 0;
        left:0;
        right: 0;
        bottom: 50px;
        overflow: auto;
    }
    .formDrawer .actions{
        height: 50px;
        @apply mt-auto flex items-center;
    }
</style>